<template>
	<upper-navigation>社区交流</upper-navigation>
	<view id="add-community">
		<view class="pic-container"  @click="selectPic">
			<view class="pic-icon" v-if="!temPic" >
				<image src="../../static/pic-icon.png" class="icon" />
				<br>
				插入图片
			</view>
			<image class="pic" :src=" temPic " v-else />
		</view>
		<view class="text-content">
			<view class="topic-text">
				<input v-model="submitContent.Topic" placeholder="在此输入帖子标题..." />
			</view>
			<view class="desc-text">
				<textarea :show-confirm-bar="false" v-model="submitContent.RawContent" placeholder="在此输入帖子的详细内容..." />
			</view>
		</view>
		<view class="lower" v-if="!hasForumId">
			<view class="left">
				<view class="line" />
				<view class="line" style="margin: 10rpx 0;" />
				<view class="line" />
			</view>
			<picker :range="forums" range-key="name" @change="selectForum">
				<view class="middle">选择类别</view>
			</picker>
		</view>
		<view class="lower" v-else>
			<view class="left" style="width: 6em">
				当前分类：
			</view>
			<view class="middle">
				{{ submitContent.ForumTopic  }}
			</view>
		</view>
		<view class="submit" @click="submit">
			发布
		</view>
		<image :src=" domain + '/static/Community/rootBackImg.png'" class="bg-img" />
	</view>
	<bottom-bar></bottom-bar>
</template>

<script setup>
	import upperNavigation from './upperNavigation.vue'
	import bottomBar from './bottomNavigationBar.vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { domain } from '../../stores/useApp.js'
	import { ref, reactive } from "vue";
	import {
		useCurrentUser
	} from '@/stores/useUser.js'
	const currentUser = useCurrentUser().user;
	
	const temPic = ref('');
	const hasForumId = ref(false);
	const submitContent = reactive({
		Topic: '',
		ForumTopic: '',
		ForumId: '',
		Cover: '',
		RawContent: '',
		Latitude: '',
		Longitude: '',
	})
	const forums = ref([]);
	
	onLoad((option) => {
		if (currentUser.nickName.indexOf('新用户') >= 0 || !currentUser.avatar) {
			uni.showModal({
				content: '必须完善个人资料方可发贴。',
				showCancel: false,
				complete: () => {
					uni.redirectTo({
						url: '../ucenter/MyInformation'
					})
				}
			});
			return;
		}
		submitContent.ForumId = option.ForumId; 
		hasForumId.value = submitContent.ForumId ? true : false ;
		getForum();
		getLocation();
	})
	
	function selectPic () {
		if( submitContent.Cover ) {
			uni.showActionSheet({
				itemList: ['预览', '删除'],
				success: function(res) {
					if (res.tapIndex == 0) {
						uni.previewImage({
							current: 0,
							urls: [temPic.value],
						})
					}
					if (res.tapIndex == 1) {
						temPic.value = ''
						submitContent.Cover = ''
					}
				}
			});
		}
		else {
			uni.showActionSheet({
				itemList: ['拍照','从图库中选择'],
				success: (res) => {
					if( res.tapIndex === 0 ) {
						//拍照
						uni.chooseMedia({
							sourceType: ['camera'], // 拍照选择
							success(res) {
								temPic.value = res.tempFiles[0].tempFilePath
								uni.getFileSystemManager().readFile({ // 读取本地文件内容
									filePath: temPic.value,
									encoding: 'base64', //编码格式
									success(res) {
										submitContent.Cover = res.data;
									}
								})
							}
						});
					}
					else if( res.tapIndex === 1 ) {
						//图库选择
						uni.chooseMedia({
							count: 1,
							sourceType: ['album'], // 拍照选择
							success(res) {
								temPic.value = res.tempFiles[0].tempFilePath
								uni.getFileSystemManager().readFile({ // 读取本地文件内容
									filePath: temPic.value,
									encoding: 'base64', //编码格式
									success(res) {
										submitContent.Cover = res.data;
									}
								})
							}
						});
					}
				}
			})
		}
	}
	
	async function submit () {
		if( showModal( '请选择帖子类别！' ,submitContent.ForumId) 
		&& showModal( '请添加图片！' ,submitContent.Cover)
		&& showModal( '请输入标题！' ,submitContent.Topic)
		&& showModal( '请输入内容！' ,submitContent.RawContent) 
		 ) {
			let msg = await uni.post("/uc/forums/SaveThread", {
				...submitContent
			});
			
			uni.showToast({
				title: '发贴成功待审核',
				icon: 'success',
				duration: 1200
			});
			setTimeout(() => {
				uni.redirectTo({
					url: './CommunityCommunication'
				})
			}, 1000);
		}
	}
	
	function showModal ( title , condition ) {
		if( condition ) {
			return true;
		}
		else {
			uni.showToast({
				title: title,
				icon:'error',
				duration: 850
			});
		}
	}
	
	function getLocation () {
		submitContent.Longitude = -1;
		submitContent.Latitude = -1;
		// uni.getLocation({
		// 	type: 'gcj02',
		// 	success: function (res) {
		// 		submitContent.Longitude = res.longitude;
		// 		submitContent.Latitude = res.latitude;
		// 	},
		// 	fail: function (res) {
		// 		console.log('Error!',res);
		// 		submitContent.Longitude = -1;
		// 		submitContent.Latitude = -1;
		// 	}
		// })
	}
	
	async function getForum () {
		let msg = await uni.post("/uc/forums/GetForumTree");
		forums.value = [];
		msg.data = msg.data || [];
		for(let item of msg.data) {
			if (submitContent.ForumId === item.id) {
				submitContent.ForumTopic = item.name;
			}
			forums.value.push({
				id: item.id,
				name: item.name
			})
		}
	}
	
	function selectForum (ev) {
		let index = ev.detail.value;
		let forum = forums.value[index];
		submitContent.ForumId = forum.id;
		submitContent.ForumTopic = forum.name;
		hasForumId.value = true;
	}
	
</script>

<style lang="less">
	
	#add-community {
		padding: 30rpx 50rpx;
		height: 1000rpx;
		
		.pic-container {
			width: 200rpx;
			height: 200rpx;
			background-color: rgba(0,0,0,0.02);
			border: 2rpx solid #c2c2c2;
			border-radius: 25rpx;
			display: flex;
			overflow: hidden;
			.pic-icon {
				align-self:center; //垂直居中
				margin: 0 auto; //水平居中
				text-align: center; //图片文字居中
				.icon {
					width: 80rpx;
					height: 60rpx;
				}
			}
			.pic {
				width: 100%;
				height: 100%;
			}
		}
		.text-content {
			margin: 30rpx 0;
			.topic-text {
				border-bottom: 1px solid #c2c2c2; 
				input {
					height: 80rpx;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
			.desc-text {
				margin-top: 30rpx;
				textarea {
					width: 100%;
					height: 300rpx;
					border: 1rpx solid #c2c2c2;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 25rpx;
				}
			}
		}
		
		.lower {
			display: flex;
			width: 100%;
			height: 55rpx;
			border-bottom: 1px solid #c2c2c2; 
			margin: 30rpx 0;
			.left {
				width: 40rpx;
				margin-right: 25rpx;
				.line {
					height: 5rpx;
					background-color: #c2c2c2;
				}
			}
			.middle {
				
				flex: 1;
				font-size: 30rpx;
				line-height: 35rpx;
			}
			.right {
				font-size: 30rpx;
				line-height: 35rpx;
			}
		}
		
		.submit {
			width:635rpx;
			height: 100rpx;
			margin: 100rpx auto;
			border-radius: 50rpx;
			background: url("https://www.lin-home.com/static/Community/searchRootLower.jpg") 50% 50% / cover;
			font-size: 36rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			&:active {
				opacity:0.7;
			}
		}
		.bg-img {
			position: fixed;
			bottom: 100rpx;
			left: 200rpx;
			z-index: -1;
		}
	}
	
</style>